<template>
  <div style="display: inline-block;text-align: left;">
    <el-button
      type="primary"
      style="margin-left:20px"
      size="small"
      @click="openEdit()"
      >{{ $t("organization.company_list") }}</el-button
    >
    <el-dialog
      v-if="dialogTableVisible"
      :visible.sync="dialogTableVisible"
      width="50%"
    >
      <el-table
        :data="list"
        :header-cell-style="{
          background: '#f2f2f2',
          color: '#606266',
          height: '10px',
          padding: '5px'
        }"
        :row-style="{ height: '39px', padding: '0px' }"
        :cell-style="{ padding: '0px' }"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        width="80%"
      >
        <el-table-column :label="$t('table.company')" align="center">
          <template slot-scope="scope">
            <el-input
              v-if="is_dipplay == scope.row.id"
              v-model="formData.company"
              class="edit-input"
              size="small"
            />
            <span v-else>{{ scope.row.company }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.operation')" align="center">
          <template slot-scope="scope">
            <el-button
              v-if="is_dipplay == scope.row.id"
              size="small"
              type="primary"
              @click="openEditModifytow(scope.row.id)"
              >{{ $t("table.complete") }}</el-button
            >
            <el-button
              v-else
              size="small"
              type="primary"
              @click="openEditModify(scope.row.id)"
              >{{ $t("table.edit") }}</el-button
            >

            <el-button
              type="danger"
              size="small"
              @click="delUser(scope.row.id)"
              >{{ $t("table.delete") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          :current-page="current_page"
          :page-sizes="[15, 50, 100]"
          :page-size="per_page"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-dialog>
    <!-- 分页 -->
  </div>
</template>

<script>
import store from "@/store";
import {
  get_list,
  company_delete,
  company_edit,
  company_info
} from "@/api/organization_manage/organization_manage";

export default {
  data() {
    return {
      if_modify: true,
      is_dipplay: false,
      dialogTableVisible: false,
      dialogVisible: false,
      list: null,
      listLoading: true,
      total: null,
      current_page: null,
      last_page: null,
      per_page: null,
      formData: {},
      listQuery: {
        name: undefined,
        company: undefined,
        department: undefined,
        status: undefined,
        type: undefined,
        page: 1,
        pagesize: 10
      },
      rules: {
        company: [
          { required: true, message: "请输入公司名称", trigger: "blur" }
        ]
      }
    };
  },
  create() {
    this.openEditModify();
  },
  methods: {
    // 获取单条数据
    openEditModify(id) {
      this.formData = {};
      this.is_dipplay = id;
      company_info(store.getters.token, { id: id }).then(res => {
        this.formData = res.data.data;
      });
    },
    // 获取总数据
    openEdit() {
      this.dialogTableVisible = true;
      get_list(store.getters.token).then(res => {
        this.list = res.data.list.data;
        this.current_page = res.data.list.current_page;
        this.per_page = res.data.list.per_page;
        this.last_page = res.data.list.last_page;
        this.total = res.data.list.total;
      });
    },
    // 修改公司数据
    openEditModifytow(id) {
      company_edit(store.getters.token, this.formData).then(res => {
        if (res.data.status) {
          this.$message.success(this.$t("table.edit_complete"));
          this.$emit("getLists");
          this.is_dipplay = false;
          this.if_modify = true;
          this.openEdit();
        } else if (res.data.msg == "更新据失败！") {
          this.dialogTableVisible = false;
        } else {
          this.$message.error(this.$t("table.edit_fail"));
        }
      });
    },
    // 删除数据
    delUser(id) {
      console.log(id, "id");
      this.$confirm(this.$t("table.delete_msg"), this.$t("table.tip"), {
        confirmButtonText: this.$t("table.complete"),
        cancelButtonText: this.$t("table.cancel"),
        type: "warning"
      }).then(() => {
        company_delete(store.getters.token, { id: id }).then(res => {
          console.log(res, "respppp");
          if (res.status == "200") {
            this.$message.success(this.$t("table.delete_complete"));
            this.openEdit();
            this.$emit("getLists");
          }
        });
      });
    },

    // 关闭弹窗
    closeDia() {
      this.dialogTableVisible = false;
    },
    // 分页相关方法
    handleFilter() {
      this.listQuery.page = 1;
      this.getLists();
    },
    handleSizeChange(val) {
      this.listQuery.pagesize = val;
      this.getLists();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getLists();
    }
  }
};
</script>

<style scoped>
/* 取消输入框下边距 */
.el-form-item {
  margin-bottom: 15px;
}
</style>
